<template>
  <basic-card
    :title="$t('menu.call_manage')"
    :iconClass="'el-icon-eleme'"
  >
    <el-form ref="form" size="small" class="text-right">
      <el-form-item>

        <el-select v-model="value"  @click="open7" placeholder="点击选择分区">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="open">全局喊话</el-button>
        <el-button type="primary" @click="open">分区喊话</el-button>
      </el-form-item>
    </el-form>

    <el-card>

      <basic-table
        :pageMethod="$mainApi.broadcastApi.getBroadcastByPage"
        :tableForm="tableForm"
      > <template #table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="name"
          :label="$t('broadcast.name')"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showDevicesDocsFormDialop(scope.row.id, scope.row)"
            >{{ scope.row.broadcastName }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="broadcastIpAddress"
          :label="$t('broadcast.ip')"
        ></el-table-column>
        <el-table-column
          prop="broadcastCode"
          :label="$t('broadcast.call_coding')"
        ></el-table-column>
        <el-table-column
          prop="broadcastStatus"
          :label="$t('broadcast.status')"
        >
          <template slot-scope="scope">
            <span>{{ filteStatus(scope.row.broadcastStatus) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="goodsDescribe" :label="$t('commodity.description')"></el-table-column> -->
      </template>
      <template #others-elements="basicTable">
      <basic-delete-dialop
        ref="DeleteDialop"
        @confirm="(list) => deleteData(list, basicTable.table.refresh)"
      />
    </template>
      </basic-table>
    </el-card>
  <call-dialop ref="CallDialop" />

  </basic-card>



</template>
<script lang="ts">
import Vue from 'vue';
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";
import BasicDeleteDialop from "@/components/Basic/Dialop/BasicDeleteDialop.vue";
import CallDialop from "./components/callDialop.vue";

export default Vue.extend({
  components: { BasicCard, BasicTable, BasicDeleteDialop, CallDialop },

  data() {
    return {
      options: [{
        value: '1',
        label: 'A区域'
      }, {
        value: '2',
        label: 'B区域'
      }, {
        value: '3',
        label: 'C区域'
      }, {
        value: '4',
        label: 'D区域'
      }, {
        value: '5',
        label: 'E区域'
      }],
      value: ''
    }
  },
  methods: {
    filteStatus(status: string) {
      for (const name in this.$config.BROADCAST_DEVICE_STATUS) {
        if ((this.$config.BROADCAST_DEVICE_STATUS as any)[name] === status) {
          return this.$t("broadcast_status." + name);
        }
      }
    },
    showDeleteDialop(selectRows: Array<any>) {
      if (selectRows.length < 1) {
        this.$message.warning(`${this.$t("message.plase_select", { target: this.$t('menu.broadcast_list') })}`);
      }
      const deleteList: Array<any> = [];
      selectRows.forEach((selected: any) => {
        deleteList.push({
          id: selected.id,
          label: selected.title
        });
      });
      (this.$refs.DeleteDialop as any).init(deleteList);
    },
    deleteData(list: Array<any>, refresh: Function) {
      const allPromise: Array<any> = [];

      list.forEach((item) => {
        allPromise.push(this.$mainApi.devicesDocsApi.deleteDevicesDocsById(item.id));
      });

      Promise.all(allPromise).then(() => {
        refresh();
      });
    },
    open() {
      (this.$refs["CallDialop"] as any).init();
    }
  }
})
</script>
<style lang="scss" scoped>
.el-message-box__headerbtn{
  display: none!important;
}
</style>
